<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>全国青少年电子信息智能创新大赛</title>
	<link rel="icon" href="./images/logo.png">
	<link rel="stylesheet" href="./lib/layui/css/layui.css">
	<link rel="stylesheet" href="./css/login.css">
	<link rel="stylesheet" href="./lib/layui/css/modules/layer/default/layer.css">
	<script src="./lib/layui/layui.js"></script>
	<script src="./lib/layui/lay/modules/layer.js"></script>
</head>
<body>
<section class="wrapper" v-cloak>
	<a href="./index.html"><img class="login-logo-text" src="./images/login-logo-text.png" alt=""></a>
	<section class="login-content">
		<img src="./images/login-logo.png" alt="">
		<form class="form layui-form" @submit.prevent>
			<section class="tab">
				<a :class="{active: currType === 1}" href="javascript:;" @click="currType = 1">账号登录</a>
				<!--<a :class="{active: currType === 2}" href="javascript:;" @click="currType = 2">手机验证码登录</a>-->
			</section>
			<template v-if="currType === 1">
				<section class="login-by-pass">
					<section class="err-msg">
						<!--<img src="./images/icons/warning.png" alt="">-->
						<!--手机号输入有误-->
					</section>
					<label class="label">
						<input autocomplete="off" name="userName" lay-verify="phone" lay-reqtext="请输入手机号" type="text" placeholder="请输入手机号">
						<img src="./images/user-icon.png" alt="">
					</label>
				</section>
				<section class="login-by-pass">
					<section class="err-msg"></section>
					<label class="label">
						<input autocomplete="off" name="passWord" lay-verify="required" lay-reqtext="请输入密码" type="password" placeholder="请输入密码">
						<img src="./images/icons/password.png" alt="">
					</label>
				</section>
				<section class="login-by-pass">
					<section class="err-msg"></section>
					<label class="label">
						<input autocomplete="off" name="verCode" lay-verify="required" lay-reqtext="请输入验证码" type="text" placeholder="请输入验证码">
						<img class="verify-code" :src="verifyCode" alt="" @click="getVCode">
					</label>
				</section>
			</template>
			<template v-else>
				<section class="login-by-pass">
					<section class="err-msg">
						<!--<img src="./images/icons/warning.png" alt="">-->
						<!--手机号输入有误-->
					</section>
					<label class="label">
						<input autocomplete="off" name="userName" lay-verify="phone" lay-reqtext="请输入手机号" type="text" placeholder="请输入手机号">
						<img src="./images/user-icon.png" alt="">
					</label>
				</section>
				<section class="login-by-pass">
					<section class="err-msg"></section>
					<label class="label" style="padding-right: 0;">
						<input autocomplete="off" name="verCode" lay-verify="required" lay-reqtext="请输入验证码" type="text" placeholder="请输入验证码">
						<a id="getCode" href="javascript:;" @click="getCode">{{ seconds ? seconds + 's' : '获取验证码'}}</a>
					</label>
				</section>
			</template>
			<label class="label register">
				<a class="register" href="./register.html">立即注册</a>
				<a v-show="currType === 1" href="./forget.html" class="forget">忘记密码</a>
			</label>
			<button class="login" lay-submit="" lay-filter="submit" type="submit">立即登录</button>
		</form>
	</section>
	<footer class="footer">版权所有62016中国电子学会普及工作委员会京JCP备120-41980号</footer>
</section>
<script src="./js/jquery.min.js"></script>
<script src="./js/vue.min.js"></script>
<script src="./lib/layui/layui.js"></script>
<script src="../js/abkj/slAjax.js"></script>
<script src="../js/abkj/ext/login.js"></script>
<script src="../js/abkj/fun_tool.js"></script>
<script src="../js/abkj/ext/vode.js"></script>
<script>
	$(function () {
		var tool = fun_tool()

		function uuid() {
			var s = []
			var hexDigits = '0123456789abcdef'
			for (var i = 0; i < 36; i++) {
				s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
			}
			s[14] = '4' // bits 12-15 of the time_hi_and_version field to 0010
			s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1) // bits 6-7 of the clock_seq_hi_and_reserved to 01
			s[8] = s[13] = s[18] = s[23] = '-'

			var uuid = s.join('')
			return uuid
		}

		var vm = new Vue({
			el: '.wrapper',
			data: {
				currType: 1,
				seconds: 0,
				key: '',
				verifyCode: '',
				timer: null,
				form: null
			},
			watch: {
				currType: function () {
					$('[name=key], [name=verCode]').val('')
				}
			},
			mounted: function () {
				this.getVCode()
				layui.use(['form', 'layer'], function () {
					vm.form = layui.form
					vm.form.on('submit(submit)', function (data) {
						var loginFn = vm.currType === 1 ? userLogin : userSMSLogin
						data = $.extend({prjName: 'MATCH'}, data.field, vm.currType === 1 ? {key: vm.key} : null)
						loginFn(data, function (data) {
							console.log(data)
							tool.setToken(data.token)
							tool.setObject('userInfo', data.userInfo)
							tool.setUserInfo(data.userInfo)
							layer.msg('登录成功', {icon: 1})
							setTimeout(function () {
								location.href = './index.html'
							}, 2000)
						}, function (err, msg) {

						})
					})
				})
			},
			methods: {
				getVCode: function () {
					var vm = this
					var key = uuid()
					getVCode(key, function (data) {
						console.log(data)
						vm.verifyCode = 'data:image/jpg;base64,' + data.image
						vm.key = key
					}, function () {
					})
				},
				getCode: function () {
					var phone = $('[name=userName]').val()
					if (phone.length==0) return layer.msg('请输入正确的手机号', {icon: 5})
					if (this.timer) return
					var vm = this
					getSMSVCode(phone, function (data) {
						console.log(data)
						vm.seconds = 60
						vm.timer = setInterval(function () {
							vm.seconds--
							if (vm.seconds === 0) {
								clearInterval(vm.timer)
								vm.timer = null
								callback && callback()
							}
						}, 1000)
					}, function (data) {

					})
				}
			}
		})
		// var timer = null
		// var seconds = 60
		// var $getCodeBtn = $('#getCode')
		// $('.tab a').on('click', function () {
		// 	var $this = $(this)
		// 	if ($this.hasClass('active')) return
		// 	$this.addClass('active').siblings().removeClass('active')
		// 	if ($this.index() === 1) {
		// 		$('.login-by-phone').show().siblings('.login-by-pass').hide()
		// 	} else {
		// 		$('.login-by-pass').show().siblings('.login-by-phone').hide()
		// 	}
		// 	$('.form')[0].reset()
		// })
		// $getCodeBtn.on('click', function () {
		// 	if (timer) return
		// 	$getCodeBtn.text(seconds + 's')
		// 	timer = setInterval(function () {
		// 		seconds--
		// 		$getCodeBtn.text(seconds + 's')
		// 		if (seconds === 0) {
		// 			clearInterval(timer)
		// 			seconds = 60
		// 			$getCodeBtn.text('获取验证码')
		// 			timer = null
		// 		}
		// 	}, 1000)
		// })
	})
</script>
</body>
</html>
